<!DOCTYPE html>
<html lang="en">

<head>
  @@include('./meta.html',{})
</head>

<body class="app-component">
  @@include('./header.html',{
  "components": "active"
  })
  <div class="component-wrapper">
    <div class="component-navleft">
      @@include('./navleft.html',{
      "tab_element": "active"
      })
    </div><!-- component-navleft -->

    <div class="component-sidebar">
      @@include('./sidebar.html',{
      "tab_element": "active",
      "listgroup": "active",
      "urlPrefix": "."
      })
    </div><!-- component-sidebar -->

      <div class="component-content">
        <div class="component-content-header">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1 mg-b-0">
              <li class="breadcrumb-item"><a href="#">Components</a></li>
              <li class="breadcrumb-item"><a href="#">UI Elements</a></li>
              <li class="breadcrumb-item active" aria-current="page">List Group</li>
            </ol>
          </nav>
          <a href="javascript:;" id="componentOptions" class="text-secondary mg-l-auto d-xl-none"><i data-feather="more-horizontal"></i></a>
        </div><!-- component-content-header -->

        <div class="component-content-body" data-spy="scroll" data-target="#navSection" data-offset="120">
          <div class="content content-components">
            <div class="container">
              <!--sd-->
              <h1 class="td-title">List Group</h1>
        <p class="td-lead">List groups are a flexible and powerful component for displaying a series of content. Read the <a href="https://getbootstrap.com/docs/4.2/components/alerts/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>

        <hr class="mg-y-40">

        <h4 id="section1" class="mg-b-10">Basic Example</h4>
        <p class="mg-b-30">The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.</p>

        <div data-label="Preview" class="td-example">
          <ul class="list-group">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
            <li class="list-group-item">Porta ac consectetur ac</li>
            <li class="list-group-item">Vestibulum at eros</li>
          </ul>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;ul class=&quot;list-group&quot;&gt;
  &lt;li class=&quot;list-group-item&quot;&gt;Cras justo odio&lt;/li&gt;
  &lt;li class=&quot;list-group-item&quot;&gt;Dapibus ac facilisis in&lt;/li&gt;
  &lt;li class=&quot;list-group-item&quot;&gt;Morbi leo risus&lt;/li&gt;
  &lt;li class=&quot;list-group-item&quot;&gt;Porta ac consectetur ac&lt;/li&gt;
  &lt;li class=&quot;list-group-item&quot;&gt;Vestibulum at eros&lt;/li&gt;
&lt;/ul&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section2" class="mg-b-10">Active Item</h4>
        <p class="mg-b-30">Add active class to a <code>.list-group-item</code> to indicate the current active selection.</p>

        <div data-label="Preview" class="td-example">
          <ul class="list-group">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item active">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
            <li class="list-group-item">Porta ac consectetur ac</li>
            <li class="list-group-item">Vestibulum at eros</li>
          </ul>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;ul class=&quot;list-group&quot;&gt;
  &lt;li class=&quot;list-group-item&quot;&gt;Cras justo odio&lt;/li&gt;
  &lt;li class=&quot;list-group-item active&quot;&gt;Dapibus ac facilisis in&lt;/li&gt;
  ...
&lt;/ul&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section3" class="mg-b-10">Disabled Item</h4>
        <p class="mg-b-30">Add disabled class to a <code>.list-group-item</code> to indicate the current active selection.</p>

        <div data-label="Preview" class="td-example">
          <ul class="list-group">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item disabled">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
            <li class="list-group-item">Porta ac consectetur ac</li>
            <li class="list-group-item">Vestibulum at eros</li>
          </ul>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;ul class=&quot;list-group&quot;&gt;
  &lt;li class=&quot;list-group-item&quot;&gt;Cras justo odio&lt;/li&gt;
  &lt;li class=&quot;list-group-item disabled&quot;&gt;Dapibus ac facilisis in&lt;/li&gt;
  ...
&lt;/ul&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h5 id="section4" class="mg-b-10">Links &amp; Buttons</h5>
        <p class="mg-b-30">Use link tag or button to create actionable list group items with hover, disabled, and active states by adding <code>.list-group-item-action</code>.</p>

        <div data-label="Preview" class="td-example">
          <div class="list-group">
            <a href="#" class="list-group-item list-group-item-action active">Cras justo odio</a>
            <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
            <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
            <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
            <a href="#" class="list-group-item list-group-item-action">Vestibulum at eros</a>
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;list-group&quot;&gt;
  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action active&quot;&gt;Cras justo odio&lt;/a&gt;
  &lt;a href=&quot;#&quot; class=&quot;list-group-item list-group-item-action&quot;&gt;Dapibus ac facilisis in&lt;/a&gt;
  ...
&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section5" class="mg-b-10">Using Image</h4>
        <p class="mg-b-30">A list that contain an image with the help of utility classes.</p>

        <div data-label="Preview" class="td-example">
          <ul class="list-group wd-md-50p">
            <li class="list-group-item d-flex align-items-center">
              <img src="https://via.placeholder.com/350" class="wd-30 rounded-circle mg-r-15" alt="">
              <div>
                <h6 class="tx-13 tx-inverse tx-semibold mg-b-0">Adrian Monino</h6>
                <span class="d-block tx-11 text-muted">Premium Member</span>
              </div>
            </li>
            <li class="list-group-item d-flex align-items-center">
              <img src="https://via.placeholder.com/600" class="wd-30 rounded-circle mg-r-15" alt="">
              <div>
                <h6 class="tx-13 tx-inverse tx-semibold mg-b-0">Joel Mendez</h6>
                <span class="d-block tx-11 text-muted">Premium Member</span>
              </div>
            </li>
            <li class="list-group-item d-flex align-items-center">
              <img src="https://via.placeholder.com/500" class="wd-30 rounded-circle mg-r-15" alt="">
              <div>
                <h6 class="tx-13 tx-inverse tx-semibold mg-b-0">Marianne Audrey</h6>
                <span class="d-block tx-11 text-muted">Premium Member</span>
              </div>
            </li>
          </ul>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;li class=&quot;list-group-item d-flex align-items-center&quot;&gt;
  &lt;img src=&quot;https://via.placeholder.com/350&quot; class=&quot;wd-30 rounded-circle mg-r-15&quot; alt=&quot;&quot;&gt;
  &lt;div&gt;
    &lt;h6 class=&quot;tx-13 tx-inverse tx-semibold mg-b-0&quot;&gt;Adrian Monino&lt;/h6&gt;
    &lt;span class=&quot;d-block tx-11 text-muted&quot;&gt;Premium Member&lt;/span&gt;
  &lt;/div&gt;
&lt;/li&gt;</code></pre>

@@include('./footer.html',{})

            </div>
          </div>
        </div><!-- component-content-body -->

        <div class="component-content-sidebar section-nav">
          <label class="tx-10 tx-medium tx-spacing-1 tx-color-03 tx-uppercase tx-sans mg-b-15">On This Page</label>
          <nav id="navSection" class="nav flex-column">
            <a href="#section1" class="nav-link">Basic Example</a>
            <a href="#section2" class="nav-link">Active Item</a>
            <a href="#section3" class="nav-link">Disabled Item</a>
            <a href="#section4" class="nav-link">Links &amp; Buttons</a>
            <a href="#section5" class="nav-link">Using Image</a>
          </nav>
        </div><!-- component-content-sidebar -->
      </div><!-- component-content -->

    </div><!-- component-wrapper -->

    @@include('./_script.html',{})
  </body>
</html>
